import { Image, InfiniteScroll, List } from "antd-mobile";
import type { ArticleItem, HomeListProps } from "@/types/list";
import { useEffect, useState } from "react";
import { getArticleListAPI } from "@/apis/list";
// @ts-ignore
import _ from "lodash";
import "./index.scss";
import { useNavigate } from "react-router-dom";
function HomeList(props: HomeListProps) {
  // 获取父组件传递的当前激活频道的id
  const { activeKey } = props;
  // 文章列表数据
  const [articleList, setArticleList] = useState<ArticleItem[]>([]);
  // 用于获取下一页文章列表的时间戳(默认为当前时间戳)
  const [timestamp, setTimestamp] = useState(new Date().getTime().toString());
  // 是否还有更多数据
  const [hasMore, setHasMore] = useState(true);
  // 路由跳转方法
  const navigator = useNavigate();
  // 获取文章列表的方法
  const getArticleList = async () => {
    // 准备请求参数
    const params = {
      channel_id: activeKey,
      timestamp: timestamp,
    };
    // 调用接口获取数据
    const res = await getArticleListAPI(params);
    // 存储文章列表数据
    setArticleList([...articleList, ...res.data.results]);
    /* 判断是否还有更多数据
    没有更多数据：pre_timestamp===null 禁用上拉加载更多
    有更多数据：则存储获取下一页数据的时间戳 */
    res.data.pre_timestamp
      ? setTimestamp(res.data.pre_timestamp)
      : setHasMore(false);
  };
  // 上拉加载更多的方法(节流处理)
  const loadMore = _.throttle(async () => {
    await getArticleList();
  }, 500);
  // 跳转到路由详情页的函数
  const goToDetail = (article_id: string) => {
    // 路由跳转并传参
    navigator(`/detail?article_id=${article_id}`);
  };
  // 组件挂载完毕(activeKey发生变化时重新获取数据)
  useEffect(() => {
    getArticleList();
  }, [activeKey]);
  return (
    <>
      <div className="home-list">
        <List header="评论列表" mode="card">
          {articleList.map((article) => (
            <List.Item
              // 函数传参必须使用箭头函数包裹回调函数
              onClick={() => goToDetail(article.art_id)}
              key={article.art_id}
              prefix={
                <Image
                  src={article.cover.images?.[0]}
                  style={{ borderRadius: 20 }}
                  fit="cover"
                  width={40}
                  height={40}
                />
              }
              description={article.pubdate}
            >
              {article.title}
            </List.Item>
          ))}
        </List>
        {/* 无限滚动 上拉加载更多
        hasMore:是否还有更多数据
        loadMore:加载更多方法*/}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={10} />
      </div>
    </>
  );
}

export default HomeList;
